<template>
  <div class="diaryItem" :class="{active:idx==activeDiary}" @click="changeActiveDiary(idx)">
    <timerVue :data="data"></timerVue>
    <div class="bottom">
      <span class="somecontent"
        >{{content}}</span
      >
    </div>
  </div>
</template>

<script>
import timerVue from "./timer.vue";
import {mapState} from 'vuex';
export default {
  props:['data','idx'],
  components: {
    timerVue,
  },
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState(['activeDiary','diaryList']),
    content(){
      return this.diaryList[this.idx].somecontent
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeActiveDiary(idx){
      this.$store.commit("CHANGEACTIVEDIARY",idx);
      
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='css' scoped>
.diaryItem {
  width: 322px;
  background-color: #fff;
  /* box-shadow: 1px 1px 2px 0px #2a2b2a;   */
  box-shadow: 1px 1px 2px 0px #0dca0d;
  margin-top: 10px;
  cursor: pointer;
}
.active {
    border: 2px solid #ca0d0d;
}
.bottom {
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>